import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: '第03课 - 布局基础',
        theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.deepPurple),
        home: const Lesson03Page(),
      );
}

class Lesson03Page extends StatelessWidget {
  const Lesson03Page({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('名片卡片')),
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            final maxW = constraints.maxWidth;
            final cardWidth = maxW < 400 ? maxW - 32.0 : 360.0;
            return Container(
              padding: const EdgeInsets.all(16),
              margin: const EdgeInsets.all(16),
              width: cardWidth,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
                boxShadow: const [
                  BoxShadow(color: Colors.black12, blurRadius: 12, offset: Offset(0, 6)),
                ],
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      const CircleAvatar(radius: 32, backgroundImage: AssetImage('assets/avatar.png')),
                      const SizedBox(width: 16),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: const [
                            Text('Flutter 开发者', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                            SizedBox(height: 4),
                            Text('打造优雅且高性能的跨端应用'),
                          ],
                        ),
                      ),
                    ],
                  ),
                  const Divider(height: 24),
                  const Text('技能'),
                  const SizedBox(height: 8),
                  Wrap(
                    spacing: 8,
                    runSpacing: 8,
                    children: [
                      Chip(
                        avatar: const Icon(Icons.code, size: 18, color: Colors.blue),
                        label: const Text('Dart'),
                        backgroundColor: Colors.blue.shade50,
                        labelStyle: TextStyle(color: Colors.blue.shade800),
                      ),
                      Chip(
                        avatar: const Icon(Icons.flutter_dash, size: 18, color: Colors.teal),
                        label: const Text('Flutter'),
                        backgroundColor: Colors.teal.shade50,
                        labelStyle: TextStyle(color: Colors.teal.shade800),
                      ),
                      Chip(
                        avatar: const Icon(Icons.http, size: 18, color: Colors.orange),
                        label: const Text('HTTP'),
                        backgroundColor: Colors.orange.shade50,
                        labelStyle: TextStyle(color: Colors.orange.shade800),
                      ),
                      Chip(
                        avatar: const Icon(Icons.hub, size: 18, color: Colors.purple),
                        label: const Text('Provider'),
                        backgroundColor: Colors.purple.shade50,
                        labelStyle: TextStyle(color: Colors.purple.shade800),
                      ),
                    ],
                  ),
                  const SizedBox(height: 16),
                  Row(
                    children: [
                      ElevatedButton.icon(
                        onPressed: () {},
                        icon: const Icon(Icons.mail),
                        label: const Text('联系 TA'),
                      ),
                      const Spacer(),
                      TextButton(onPressed: () {}, child: const Text('作品集')),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}